const APP = {
    data() {
        return {
            todoList: [
                /**
                 * {
                 *      id: new Date().getTime(), 代码生成
                 *      content: input content,  input text
                 *      completed: false,初始false input checkbox
                 * }
                 */
            ],
            inputVal: ''
        }
    },
    template: `
       <div>
          <div>
            <input
                type="text"
                placeholder="Typing..."
                v-model="inputVal"
            />
            <button @click="addTodo">Add</button>
          </div>
          <div>
            <ul>
                <template v-if="todoList.length > 0">
                    <li v-for="item of todoList" :key="item.id">
                        <input 
                        type="checkbox" 
                        :checked="item.completed"
                        @click="toggleTodo(item.id)"
                        />
                        <span
                            :style="{
                                textDecoration : item.completed? 'line-through' : 'none'
                            }"
                        >{{ item.content }}</span>
                        <button @click="deleteTodo(item.id)">DEL</button>
                    </li>
                </template>
                <template v-else>
                    <li>- 暂无数据 -</li>
                </template>
            </ul>
          </div>
       </div>
    `,
    methods: {
        addTodo() {

            const _inputValue = this.inputVal.trim();

            if (_inputValue.length === 0) {
                return;
            }

            const hasThisContent = this.todoList.some(todo => todo.content === this.inputVal);

            if (hasThisContent) {
                alert('This content exsited in todoList');
                return;
            }

            this.todoList.push({
                id: new Date().getTime(),
                content: _inputValue,
                completed: false
            });
            this.inputVal = '';
        },
        deleteTodo(id) {
            this.todoList = this.todoList.filter((item) => item.id !== id);
        },
        toggleTodo(id) {
            this.todoList = this.todoList.map(item => {
                if (item.id === id) {
                    item.completed = !item.completed;
                }

                return item;
            })
        }
    }

}

Vue.createApp(APP).mount('#app');